<template>
  <el-dialog
    modal-class="condition-select-prod-dialog"
    v-model="_isOpen"
    title="选择商品"
    width="1200"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <template #header>
      <el-tabs v-model="activeName">
        <el-tab-pane label="在条件内选材" name="1"></el-tab-pane>
        <el-tab-pane label="在条件外选材" name="2"></el-tab-pane>
      </el-tabs>
    </template>
    <div v-loading="loading">
      <!-- 条件内 -->
      <selectComBrand
        v-show="activeName === '1'"
        ref="selectComBrandRef"
        :optionInfo="{
          isMounted: false,
          activeName: '1',
          budgetId: optionInfo.budgetId,
          contentId: optionInfo.contentId,
          productType: optionInfo.productType,
          detail: _detail,
          project: optionInfo.project
        }"
        @changeCate="changeCate1"
      />

      <!-- 条件外 -->
      <selectCom
        v-show="activeName === '2'"
        ref="selectComRef"
        :optionInfo="{
          isMounted: false,
          activeName: '2',
          budgetId: optionInfo.budgetId,
          contentId: optionInfo.contentId,
          productType: optionInfo.productType
        }"
        @changeCate="changeCate2"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <div class="left">
          <p>
            共<i style="font-style: normal; color: #86909c">
              {{ activeName === "1" ? selectComBackObj1.total : selectComBackObj2.total }} </i
            >个搜索结果
          </p>
          <p class="mr45" style="color: #86909c">
            已选中：<el-button type="primary" link style="font-size: 18px" @click="drawer = true">
              {{ selectedData.length }}
            </el-button>
          </p>
        </div>
        <div class="right">
          <el-button type="info" @click="clickClose">取消</el-button>
          <el-button type="primary" @click="submit" :disabled="selectedData.length <= 0">确认导入</el-button>
        </div>
      </div>
    </template>

    <!-- 已选中的sku -->
    <el-drawer
      v-model="drawer"
      :title="'已选中：' + selectedData.length"
      modal-class="sku-selected-drawer"
      :before-close="
        () => {
          drawer = false;
        }
      "
    >
      <div class="selected-table-wrap">
        <el-table class="jzt-table" :data="selectedData" stripe style="width: 100%">
          <template #empty>
            <el-empty description="这里暂时什么都没有" />
          </template>
          <el-table-column prop="date" fixed show-overflow-tooltip label="商品信息" width="360">
            <template #default="scope">
              <div class="col1">
                <div>
                  <div class="left">
                    <img :src="scope.row.mainPicUrl" alt="" />
                  </div>
                  <div class="right">
                    <h3 class="name">{{ scope.row.productAliasName }}</h3>
                    <p style="white-space: break-spaces">{{ scope.row.skuProperties }}</p>
                    <p>SKU编码：{{ scope.row.skuCode }}</p>
                    <p>ID：{{ scope.row.productId }}</p>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brandName" show-overflow-tooltip label="品牌" width="200" />
          <el-table-column prop="modeCode" show-overflow-tooltip label="型号" width="135" />
          <el-table-column prop="productUnit" show-overflow-tooltip label="单位" width="135">
            <template #default="scope">
              {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
            </template>
          </el-table-column>
          <el-table-column prop="anotherName" show-overflow-tooltip label="供应商" width="224">
            <template #default="scope">{{ scope.row.anotherName }}</template>
          </el-table-column>
          <!-- <el-table-column prop="warrantyTime" label="商品质保日期" width="240"> </el-table-column> -->
          <el-table-column fixed="right" show-overflow-tooltip label="操作" width="80">
            <template #default="scope">
              <el-button type="danger" link @click="delTempProductFun(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
import { Search } from "@element-plus/icons-vue";
import prodDetail from "./prodDetail.vue";
import attrFilter from "./attrFilter.vue";
import selectCom from "./selectCom.vue";
import selectComBrand from "./selectComBrand.vue"; //条件外选择，品牌筛选
import { packageAddMaterial, inventoryAddMaterial, delTempProduct, delCache } from "@/apis/quote-price/following";
import useCodeArrStore from "@/store/modules/select";

const selectComRef = ref();
const selectComBrandRef = ref();

const emit = defineEmits(["update:isOpen", "close", "submit"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        budgetId: "",
        contentId: "",
        project: {}, //项目obj
        productType: -1, //1-主材 2-辅材
        detail: {} //组合添加的cailiaoDetailList组件的列表数据
      };
    }
  }
});
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const activeName = ref("1");
const drawer = ref(false); //选中的sku抽屉
const selectedData = ref([]);
const _detail = ref({});
const loading = ref(false);

watch(
  () => props.optionInfo.detail,
  val => {
    if (val) {
      // console.log("aaaaaaaaaaaaa传递过来得值===", val);
      _detail.value = val;

      if (props.isOpen) {
        console.log("打开了条件内条件外弹窗");
        loading.value = true;
        selectComBackObj1.value = { total: 0, selected: [] };
        selectComBackObj2.value = { total: 0, selected: [] };
        setTimeout(async () => {
          if (selectComBrandRef.value) {
            selectComBrandRef.value.resetPageList(); //清空商品page列表---条件内
            await selectComBrandRef.value.categoryListFun(); //查询tree---条件内
            loading.value = false;
          }
          if (selectComRef.value) {
            selectComRef.value.resetPageList(); //清空商品page列表---条件外
            await selectComRef.value.categoryListFun(); //查询tree---条件外
            loading.value = false;
          }
        }, 10);
      }
    }
  },
  { deep: true }
);

//移除暂存的sku
const delTempProductFun = item => {
  delFun(item);
};
const delFun = item => {
  delCache({
    businessSkuId: item.businessSkuId,
    code: JSON.parse(localStorage.getItem("followingObj"))._time,
    isContOut: item.isContOut
  }).then(res => {
    if (res.code === 200) {
      if (item.isContOut === 0) {
        // 条件内
        selectComBrandRef.value.getTempProductListFun(); //查询暂存的商品sku
      } else if (item.isContOut === 1) {
        //条件外
        selectComRef.value.getTempProductListFun(); //查询暂存的商品sku
      }
    }
  });
};

//条件内-组件返回的选中sku列表和查询商品的total
const selectComBackObj1 = ref({ total: 0, selected: [] }); //商品组件返回的obj
const changeCate1 = obj => {
  selectComBackObj1.value = obj;
  const Arr = [...obj.selected, ...selectComBackObj2.value.selected];
  selectedData.value = removeC(Arr); //去重
  // console.log("条件内-组件返回的数据===", obj);
};

//条件外-组件返回的选中sku列表和查询商品的total
const selectComBackObj2 = ref({ total: 0, selected: [] }); //商品组件返回的obj
const changeCate2 = obj => {
  selectComBackObj2.value = obj;
  const Arr = [...selectComBackObj1.value.selected, ...obj.selected];
  selectedData.value = removeC(Arr); //去重
  // console.log("条件外-组件返回的数据===", obj);
};

//选中的sku去重
const removeC = (list = []) => {
  const LIST = [];
  list.map(item => {
    const ids = LIST.map(_item => _item.businessSkuId);
    if (!ids.includes(item.businessSkuId)) {
      LIST.push(item);
    }
  });
  return LIST;
};

const submit = () => {
  console.log("选中的商品sku===", selectedData.value);
  emit("submit");
};

onMounted(async () => {});

const reset = (isClearSelected = false) => {
  if (selectComRef.value) {
    selectComRef.value.reset(isClearSelected); //false 不清空已选择的sku
    selectComRef.value.refresh();
  }
  if (selectComBrandRef.value) {
    selectComBrandRef.value.reset(isClearSelected); //false 不清空已选择的sku
    selectComBrandRef.value.refresh();
  }
  if (isClearSelected) {
    selectedData.value = [];
  }
};

const clickClose = () => {
  reset();
  activeName.value = "1";
  _isOpen.value = false;

  // emit("close");
};
defineExpose({ reset, clickClose });
</script>

<style lang="scss">
.condition-select-prod-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0;
      .el-tabs__nav-wrap {
        padding: 0 20px;
      }
      .el-tabs__header {
        margin-bottom: 0;
      }
      .el-tabs__item {
        padding-bottom: 20px;
      }
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    .left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-of-type(2) {
        display: flex;
        align-items: center;
      }
    }
    .right {
      .el-button {
        font-size: 14px !important;
      }
    }
    .el-button {
      font-size: 18px;
    }
  }
  .list-item {
    border-radius: 2px;
    margin: 0 0px 10px 0;
    width: 50%;
    box-sizing: border-box;
    & > div {
      position: relative;
      background-color: #f5f7fa;
    }
    &:nth-of-type(2n + 1) {
      padding-right: 10px;
    }
    &:nth-of-type(2n) {
      padding-left: 10px;
    }

    .el-checkbox {
      position: absolute;
      top: 40px;
      left: 10px;
    }
    .prod-info {
      min-height: 100px;
      font-size: 16px;
      position: relative;
      .info {
        flex: 1;
      }
      .img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        background-color: #eee;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      h3 {
        font-size: 16px;
        color: #3d3d3d;
        line-height: 22px;
      }
      p {
        font-size: 12px;
        line-height: 20px;
        color: #86909c;
      }
      .top {
        display: flex;
        padding: 10px;
        // padding-left: 46px;
      }
      footer {
        padding: 10px;
        border-top: 1px solid #e1e6ed;
        & > div {
          display: flex;
          justify-content: space-between;
        }
        p {
          flex: 1;
        }
        .tips {
          font-size: 12px;
          color: #86909c;
          margin: 0 -10px;
          margin-top: 10px;
          padding: 10px 10px 0 10px;
          line-height: 20px;
          border-top: 1px solid #e1e6ed;
        }
      }
      .warehouse-icon {
        position: absolute;
        right: 0;
        top: 0;
        background-color: #d9edff;
        border-radius: 12px 0px 0px 12px;
        font-size: 12px;
        line-height: 24px;
        padding: 0 9px 0 15px;
      }
    }
  }
}
.sku-selected-drawer.el-overlay {
  .el-drawer {
    width: 1160px !important;
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    border: 1px solid #dcdfe6;
    margin-bottom: 0;
    padding-bottom: 24px;
    color: #131414;
    font-size: 18px;
  }
  .el-drawer__footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
  }
  .col1 {
    & > div {
      display: flex;
    }

    .left {
      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
      }
    }
    .right {
      padding-left: 18px;
      .name {
        font-size: 14px;
        color: #3d3d3d;
        margin-bottom: 5px;
      }
      p {
        font-size: 12px;
        color: #86909c;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
</style>
